<html>
    <head>
        <title>PMTiles MapLibre Example</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" crossorigin="anonymous">
        <script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/pmtiles@3.0.7/dist/pmtiles.js"></script>
        <style>
            body {
                margin: 0;
            }
            #map {
                height:100%; width:100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            // add the PMTiles plugin to the maplibregl global.
            let protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles",protocol.tile);

            // pmtiles extract https://build.protomaps.com/20240807.pmtiles my_area.pmtiles --bbox=11.221144,43.745121,11.287543,43.789306
            let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";

            const p = new pmtiles.PMTiles(PMTILES_URL);

            // this is so we share one instance across the JS code and the map renderer
            protocol.add(p);

            // we first fetch the header so we can get the center lon, lat of the map.
            p.getHeader().then(h => {
                const map = new maplibregl.Map({
                    container: 'map',
                    zoom: h.maxZoom-2,
                    center: [h.centerLon, h.centerLat],
                    style: {
                        version:8,
                        sources: {
                            "example_source": {
                                type: "vector",
                                // For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
                                // tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
                                // see https://maplibre.org/maplibre-style-spec/sources/#vector
                                url: "pmtiles://" + PMTILES_URL,
                                attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
                            }
                        },
                        layers: [
                            {
                                "id":"water",
                                "source": "example_source",
                                "source-layer":"water",
                                "type": "fill",
                                "paint": {
                                    "fill-color": "#80b1d3"
                                }
                            },
                            {
                                "id":"buildings",
                                "source": "example_source",
                                "source-layer":"buildings",
                                "type": "fill",
                                "paint": {
                                    "fill-color": "#d9d9d9"
                                }
                            },
                            {
                                "id":"roads",
                                "source": "example_source",
                                "source-layer":"roads",
                                "type": "line",
                                "paint": {
                                    "line-color": "#fc8d62"
                                }
                            },
                            {
                                "id":"pois",
                                "source": "example_source",
                                "source-layer":"pois",
                                "type": "circle",
                                "paint": {
                                    "circle-color": "#ffffb3"
                                }
                            }
                        ]
                    }
                });
                map.showTileBoundaries = true;
            })
        </script>
    </body>
</html>
